<!-- 角色详情弹窗线框（独立文件） -->
<div class="modal-mask" style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:1000;display:flex;align-items:center;justify-content:center;">
  <div class="modal-dialog" style="width:820px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);padding:0 0 24px 0;max-height:90vh;overflow-y:auto;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 12px 32px;border-bottom:1px solid #f0f0f0;">
      <span style="font-size:1.3rem;font-weight:bold;">角色详情</span>
      <span style="font-size:1.5rem;color:#bbb;cursor:pointer;">×</span>
    </div>
    <div style="padding:0 32px;">
      <!-- 基本信息 -->
      <div style="margin:24px 0 0 0;">
        <div style="font-weight:bold;font-size:1.1rem;margin-bottom:12px;">基本信息</div>
        <div style="display:flex;flex-wrap:wrap;gap:18px 32px;">
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">角色名称</span>
            <span>数据分析师</span>
          </div>
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">角色编码</span>
            <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:2px 10px;font-size:0.95rem;">data_analyst</span>
          </div>
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">状态</span>
            <span style="color:#67c23a;background:#f0f9eb;border-radius:4px;padding:2px 10px;font-size:0.95rem;">启用</span>
          </div>
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">用户数</span>
            <span>0</span>
          </div>
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">创建时间</span>
            <span>2025-07-30 14:42:02</span>
          </div>
          <div style="width:320px;display:flex;align-items:center;gap:8px;">
            <span style="color:#888;width:80px;text-align:right;">描述</span>
            <span>数据分析师，专注数据分析相关功能</span>
          </div>
        </div>
      </div>
      <!-- 权限信息 -->
      <div style="margin:32px 0 0 0;">
        <div style="display:flex;align-items:center;gap:16px;">
          <span style="font-weight:bold;font-size:1.1rem;">权限信息</span>
          <button style="background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:4px 16px;font-size:0.95rem;cursor:pointer;">编辑权限</button>
        </div>
        <div style="margin:16px 0 0 0;display:flex;flex-wrap:wrap;gap:10px;">
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">实时接收仪表盘</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">个人资料查看</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">数据分析仪表盘</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">仪表盘查看</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">系统监控</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">查看用户列表</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">查看系统日志</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">查看角色列表</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">更新个人信息</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">图表查看</span>
          <span style="background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 12px;font-size:0.95rem;">实时数据分析</span>
        </div>
      </div>
      <!-- 关联用户 -->
      <div style="margin:32px 0 0 0;">
        <div style="font-weight:bold;font-size:1.1rem;margin-bottom:12px;">关联用户 <span style="color:#bbb;font-size:0.95rem;">(0)</span></div>
        <div style="height:80px;display:flex;align-items:center;justify-content:center;color:#bbb;">
          <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" rx="12" fill="#f6f7fb"/><path d="M24 27c-4.418 0-8 1.79-8 4v1h16v-1c0-2.21-3.582-4-8-4Zm0-2a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" fill="#e0e0e0"/></svg>
          <span style="margin-left:16px;">暂无关联用户</span>
        </div>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:32px;">
        <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;cursor:pointer;">关闭</button>
        <button type="button" style="background:#6a9cfb;color:#fff;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;font-weight:bold;cursor:pointer;">编辑角色</button>
      </div>
    </div>
  </div>
</div>
